<template>
  <!-- <div class="reportbox"> -->
  <!-- ----------------------------------------------
                        报告路况
    ----------------------------------------------- -->
  <div class="report">
    <el-menu
      class="el-menu-demo"
      mode="horizontal"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
    >
      <!-- <span>报告路况</span> -->
      <span @click="dialogFormVisible = true">报告路况</span>
      <el-dialog title="报告路况" :visible.sync="dialogFormVisible">
        <el-form ref="form" :model="form">
          <el-form-item
            label="事件类型"
            :label-width="formLabelWidth"
            prop="event_type"
          >
            <el-select v-model="form.event_type" placeholder="请选择事件类型">
              <el-option label="碰撞" value="碰撞"></el-option>
              <el-option label="刮擦" value="刮擦"></el-option>
              <el-option label="追尾" value="追尾"></el-option>
              <el-option label="碾压" value="碾压"></el-option>
              <el-option label="翻车" value="翻车"></el-option>
              <el-option label="失火" value="失火"></el-option>
              <el-option label="其他" value="其他"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="事件地址"
            :label-width="formLabelWidth"
            prop="event_addr"
          >
            <el-input
              v-model="form.event_addr"
              autocomplete="off"
              placeholder="请输入路况地址，包含事故路段"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="建筑标识"
            :label-width="formLabelWidth"
            prop="event_mark"
          >
            <el-input
              v-model="form.event_mark"
              autocomplete="off"
              placeholder="请输入路况事故最近的建筑标识"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="发生时间"
            :label-width="formLabelWidth"
            prop="datetime"
          >
            <el-col :span="11">
              <el-date-picker
                v-model="datetime"
                type="datetime"
                placeholder="选择日期时间"
              >
              </el-date-picker>
            </el-col>
          </el-form-item>
          <el-form-item
            label="事件描述"
            :label-width="formLabelWidth"
            prop="event_describe"
          >
            <el-input
              v-model="form.event_describe"
              autocomplete="off"
              placeholder="请输入事故的具体信息"
            ></el-input>
          </el-form-item>
        </el-form>

        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="reportCondition">确 定</el-button>
          <el-button @click="dialogFormVisible = false">取 消</el-button>
        </div>
      </el-dialog>
    </el-menu>
  </div>
</template>
<script>
export default {
  name: 'report',
  data() {
    return {
      dialogFormVisible: false,
      form: {
        user_id: '',
        event_type: '',
        event_addr: '',
        event_mark: '',
        event_describe: '',
      },
      formLabelWidth: '120px',
      datetime: '',
      username: '',
    };
  },
  created() {
    this.username = this.$cookies.get('username');
    this.$http.get('/report?username=' + this.username).then((res) => {
      this.form.user_id = res.result.user_id;
    });
  },
  // mounted() {
  // },
  methods: {
    reportCondition() {
      // console.log('form', this.form);
      this.$http.post('/report', this.form).then((res) => {});
      this.dialogFormVisible = false;
      this.$message({
        message: '报告路况成功',
        type: 'success',
      });
      this.$refs['form'].resetFields();
    },
  },
};
</script>
<style scoped>
/* .reportbox {
  position: absolute;
  display: flex;
  top: 15px;
  right: 3px;
  width: 400px;
  height: 45px;
  background-color: #fff;
  border-radius: 15px;
  box-shadow: 5px 5px 4px rgba(0, 0, 0, 0.6);
} */
/* -----------------------
        报告路况
------------------------ */
.report {
  position: absolute;
  top: 5px;
  left: 340px;
  width: 90px;
  height: 35px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.6);
  z-index: 1;
}
.report:hover {
  background-color: #dbdbdb;
}
.report span {
  position: absolute;
  top: 5px;
  left: 15px;
  font-weight: 700;
  color: #7c8196;
}
.report span:hover {
  color: white;
}

.el-input__inner {
  -webkit-appearance: none;
  background-color: #fff;
  background-image: none;
  border-radius: 0px;
  border: 1px solid #dcdfe6;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: #606266;
  display: inline-block;
  font-size: inherit;
  height: 40px;
  line-height: 40px;
  outline: 0;
  padding: 0 15px;
  padding-right: 15px;
  -webkit-transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  width: 80px;
  margin-top: 0px;
}
.el-input__inner {
  width: 2000px;
  border-radius: 50px;
  padding: 0 48px;
  font-size: 17px;
  box-shadow: 5px 5px 4px rgba(0, 0, 0, 0.6);
}
.el-dialog {
  position: relative;
  margin: 0 auto 50px;
  margin-top: 0px;
  background: #fff;
  border-radius: 16px;
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 50%;
  z-index: 10000;
}
</style>
